//
// Sidebar Sidenav & Secondary hover menu
// --------------------------------------------------

.sidebar-left {
  .navbar-sidebar {
    border-bottom: 0;
    border-left: 0;
    border-top: 0;
    margin: 0;
    min-height: 46px;
    &.visible-xs-block {
      border:0;
    }
    .sidebar-header {
      border: 0;
      padding-bottom: 0;
      margin: 0;
      display: block;
      &:before {
        content: " ";
        display: table;
      }
      &:after {
        content: " ";
        display: table;
        clear: both;
      }
      h2 {
        // make size, weight and height consistent with project list select
        color: @navbar-os-project-menu-color;
        font-size: 15px;
        margin-left: 20px;
        margin-top: 13px;
      }
      .navbar-toggle {
        margin:4px 10px 0;
        padding: 10px;
        .icon-bar {
          background: @navbar-pf-alt-color;
        }
        &:hover, &:focus {
          .icon-bar {
            background: @navbar-pf-alt-navbar-toggle-icon-bar-hover-bg;
          }
        }
      }
    }
    ul.nav-sidenav-primary > li {
      background: @sidebar-os-bg;
      border-bottom: 1px solid @sidebar-os-border-color;
      border-top: 1px solid @sidebar-os-border-inset-color;
      font-weight: 300;
      &.active {
        &,
        &:focus,
        &:hover,
        &.open {
          &,
         .dropdown-menu {
            background-color: @sidebar-os-active-bg;
          }
          .nav-sidenav-secondary > li a {
            &:focus,
            &:hover {
              background: @sidebar-os-dropdown-link-active-hover-bg;
            }
          }
        }
        > a {
          color: @sidebar-os-active-color;
          &:after {
            background-color: @sidebar-os-active;
            bottom: 0;
            content: '';
            display: block;
            left: 0;
            position: absolute;
            top: -1px;
            width: 3px;
          }
          .fa {
            color: @sidebar-os-active;
          }
        }
      }
      &:focus,
      &:hover,
      &.open {
        background-color: @sidebar-os-hover-bg;
        > a {
          background-color: transparent;
          color: @sidebar-os-active-color;
          .fa, .pficon {
            color: @sidebar-os-active;
          }
        }
        .dropdown-menu {
          background-color: @sidebar-os-hover-bg;
        }
      }
      > a {
        color: @sidebar-os-color;
        &,
        &:focus,
        &:hover {
          background-color: transparent;
        }
        &.dropdown-toggle:focus {
          outline: thin dotted;
        }
        .fa {
          color: @sidebar-os-icon-color;
        }
      }
      .dropdown-menu {
        background-color: @sidebar-os-hover-bg;
      }
      .nav-sidenav-secondary > li {
        &.active a {
          &,
          &:hover {
            background: @sidebar-os-dropdown-link-active-bg !important;
            color: @sidebar-os-active-color;
          }
        }
        a {
          color: @sidebar-os-color;
          padding-left: 36px;
          &:focus,
          &:hover {
            background: @sidebar-os-dropdown-link-hover-bg;
            color: @sidebar-os-active-color;
          }
        }
      }
    }
  }
}
.show-sidebar-right {
  .right-content {
    padding: 20px;
  }
  .sidebar-right {
    background-color: @body-bg;
    .sidebar-header {
      border-color: @page-header-border-color;
      margin-bottom: 0;
      margin-top: 20px;
      h2 {
        margin-left: 20px;
      }
    }
    h3 {
      border-top: 1px solid darken(@page-header-border-color, 2%);
      margin-top: 0;
      padding-top: @line-height-computed;
      &:last-child {
        border-top: 0;
        padding-top: 0;
      }
    }
    .dl-horizontal {
      margin: 0 0 @line-height-computed;
      dt {
        text-align: left;
      }
      dd {
        .word-break();
      }
    }
    .sidebar-help {
      color: @gray-light;
    }
  }
}


@media (min-width: @screen-sm-min) {
  .sidebar-left {
    .navbar-sidebar {
      border-right: 1px solid @sidebar-os-border-color;
      border-bottom: 0;
      width: @sidebar-left-width-sm;
      position: absolute;
      top:1px;
      right:0;
      bottom: 0;
      left:0;
      .sidebar-header {
        display: none;
      }
      // Sidebar hover menu
      .hover-nav.dropdown-menu {
        border: 0;
        border-radius: 0;
        .box-shadow(2px 2px 2px rgba(0, 0, 0, 0.125));
        left: 100%;
        margin: 0 0 0 1px;
        min-width: 230px;
        position: absolute;
        padding: 10px;
        top: 0;
      }
      ul.nav-sidenav-primary {
        border-bottom: 1px solid @sidebar-os-border-inset-color;
        > li {
          position: static;
          &.open {
            > a:before {
              // connect tab and hover-nav
              background-color: @sidebar-os-hover-bg;
              bottom: 0;
              content: '';
              display: block;
              right: -1px;
              position: absolute;
              top: -1px;
              width: 1px;
            }
            &.active > a:before {
              background-color: @sidebar-os-active-bg;
            }
          }
          > a {
            padding: @sidebar-os-padding-x @sidebar-os-padding-y;
            text-align: center;
            .fa {
              display: inline;
              font-size: 20px;
              &.fa-angle-right {
                color: @sidebar-os-color;
                display: none;
                font-size: 18px;
                height: 18px;
                position: absolute;
                right: 5px;
                text-align: right;
                top: 23px;
              }
            }
            span {
              display: block;
              margin: 0;
            }
          }
          .hover-nav ul.nav-sidenav-secondary li a {
            padding-left: 15px;
          }
        }
      }
    }
  }
}

@media (min-width: @screen-sm-min) and (max-width: @screen-md-max) {
  .show-sidebar-right {
    .sidebar-right {
      .dl-horizontal {
        dt {
          float: none;
          width: auto;
        }
        dd {
          margin-left: 0;
          margin-bottom: (@line-height-computed / 2);
        }
      }
    }
  }
}

@media (min-width: @screen-sm-min) and (max-width: @screen-lg-max) {
  //Ensure icon and text stack
  ul.nav-sidenav-primary> li {
    > a {
      span {
        padding: 0 10px;
      }
    }
  }
}

@media (min-width: @screen-lg-min) {
  .sidebar-left {
    .navbar-sidebar {
      font-size: @font-size-base + 1;
      .nav-sidenav-secondary.hover-nav.dropdown-menu {
        font-size:  @font-size-base + 1;
      }
      ul.nav-sidenav-primary > li {
        > a {
          padding-bottom: @sidebar-os-padding-y + 10;
          padding-top: @sidebar-os-padding-y + 10;
        }
      }
    }
  }
}

@media (min-width: @screen-xlg-min) {
  .sidebar-left {
    .navbar-sidebar {
      ul.nav-sidenav-primary > li {
        > a {
          text-align: left;
          padding: (@sidebar-os-padding-x);
          .fa {
            .primary-nav-icon-xl();
            &.fa-angle-right {
              display: block;
            }
          }
        }
      }
    }
  }
  .show-sidebar-right {
    .sidebar-right {
        .dl-horizontal {
          dt {
            width: 49%;
          }
          dd {
            margin-left: 50%;
          }
        }
    }
  }
}
